<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        //jsonp的实现原理

    //     1、首先在客户端声明一个函数如: jsoncallback', 然后把函数的名字作为接口参数传给服务器。
           //注意：服务端得到参数值后，要用这 个参数(......)把将要输出的json内容包括起来，
           //此时，服务器生成 json 数据才能被客户端正确接收。
    //     2、客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
           //传入到了客户端预先定义好的 callback 函数里.
        
    //     3、可以说jsonp的方式原理上和<script src="http://跨域/...xx.js">

    // 是一致的.JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

    //弊端：只支持get，不支持post
    function callback(data) { console.log(data); }
    window.onload = function () {

    createDynamicScript('http://localhost:3000/jsonp?jsonpCallback=callback');
    }

    function createDynamicScript(url,successCallback=null) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = url;
    /* 
    ** script标签的onload和onreadystatechange事件 
    ** IE6/7/8支持onreadystatechange事件 
    ** IE9/10支持onreadystatechange和onload事件 
    ** Firefox/Chrome/Opera支持onload事件 
    */

    // 判断IE8及以下浏览器 
    var isIE = !-[1,];
    if (isIE) {
    script.onreadystatechange = function () {
    if (this.readyState == 'loaded' || this.readyState == 'complete') {
    successCallback&&successCallback();
    }
    }
    } else {
    // IE9及以上浏览器，Firefox，Chrome，Opera 
    script.onload = function () {
    successCallback&&successCallback();
    }
    }
    document.body.appendChild(script);
    }
    </script>
</head>

<body>

</body>

</html>